
<template>
	<div>
		<el-row>
		    <el-button>默认按钮</el-button>
		    <el-button type="primary">主要按钮</el-button>
		    <el-button type="success">成功按钮</el-button>
		    <el-button type="info">信息按钮</el-button>
		    <el-button type="warning">警告按钮</el-button>
		    <el-button type="danger">危险按钮</el-button>
		</el-row>
<!--    <Demo1>setup属性</Demo1>-->
<!--    <demo2>计算属性computed</demo2>-->
<!--    <demo3>watch、watchEffect</demo3>-->

<!--    <button @click="isShow = !isShow">显示、隐藏</button>
    <demo4 v-if="isShow">vue3生命周期</demo4>-->

<!--    <button @click="isShow = !isShow">显示、隐藏</button>
    <demo5 v-if="isShow">hooks</demo5>-->

<!--    <demo6>toRef、toRefs</demo6>-->
    <demo7>shallowReactive/shallowRef</demo7>

	</div>
	
</template>



<script>
import demo1 from "./views/demo01.vue";
import demo2 from "./views/demo02.vue";
import demo3 from "./views/demo03.vue";
import demo4 from "./views/demo04.vue";
import demo5 from "./views/demo05.vue";
import demo6 from "./views/demo06.vue";
import demo7 from "./views/demo07.vue";

import {ref} from 'vue'


export default {
  name: 'app',
  components:{demo4,demo5,demo6,demo7},
  setup(){
    let isShow = ref(true)


    return {
      isShow
    }
  }
}

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
